<template>
  <view class="content" id="container"> 
      
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    mounted() {
      
    },
    destroyed() {
      
    },
  }
</script>


<script module="hlb" lang="renderjs">
  import * as THREE from 'three'
  import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
  import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
  import {FBXLoader} from 'three/examples/jsm/loaders/FBXLoader.js';
  
  var renderer 
  var scene 
  var camera 
  var controls 
  var ambient 
  
  export default {
    data() {
      return {
        modelUrl: '../../static/anim/boy1.fbx', // 'https://dtmall-tel.alicdn.com/edgeComputingConfig/upload_models/1591673169101/RobotExpressive.glb', 
      }
    },
    mounted() {
      console.log('=========== [renderjs] mounted')
      this.$nextTick(()=>{
        this.initThree() 
        this.loaddModel() 
        this.animateEx() 
      })
    },
    methods: {
      initThree() {
        var element = document.getElementById('container')
        let width   = element.clientWidth 
        let height  = element.clientHeight 
        console.log('=== width, height:', width, height) 
        
        /* 创建场景对象Scene */
        scene = new THREE.Scene()
        
        // 环境光
        ambient = new THREE.AmbientLight(0xffffff) 
        scene.add(ambient) 
 
        // 相机位置
        // 创建相机
        camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000)
        camera.position.z = 10
        // // 创建相机对象（正射投影）
        // var cameraZ = 10;
        // camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 1000);
        // camera.position.set(0, 0, cameraZ); //设置相机的摆放位置
        // camera.lookAt(new THREE.Vector3(0, 0, 0)); // 控制相机的焦点(镜头)位置，决定相机的朝向（取值为3维坐标对象-THREE.Vector3(x,y,z)）
 
        //创建渲染器对象
        renderer = new THREE.WebGLRenderer({
          antialias: true,
          alpha: true //设置透明，为true时，背景颜色需要注释掉
        });
        renderer.setSize(width, height); // 设置渲染区域尺寸
        renderer.domElement.classList.add("canvasId") //设置class名称,可用于在其他地方移除, 如 element.removeChild(document.querySelector('.canvasId'))
        element.appendChild(renderer.domElement)
        
        // 执行渲染操作，指定场景，相机作为参数
        renderer.render(scene, camera) 
        
        // 加载控件(自动旋转)
        controls = new OrbitControls(camera, renderer.domElement)
        controls.enabled       = true 
        controls.enableRotate  = true 
        controls.enableZoom    = false 
        controls.autoRotate    = true 
        controls.minPolarAngle = Math.PI / 4 
        controls.maxPolarAngle = 3 - (Math.PI / 4) 
      },
      animateEx() {
        if (controls) {
          requestAnimationFrame(this.animateEx) 
          controls.update()  //自动旋转
          renderer.render(scene, camera)  //执行渲染操作
        }
      },
      
      // 导入本地或者服务器上的模型都可以, 比如路径 '../../static/Robot.glb' 
      loaddModel() {
        let fileName   = this.modelUrl.lastIndexOf(".")
        let fileFormat = this.modelUrl.substring(fileName + 1, this.modelUrl.length).toLowerCase()
        let loader 
        if (fileFormat == 'fbx') { //导入FBX模型文件
          console.log('=== load fbx model') 
          loader = new FBXLoader() 
          loader.load(this.modelUrl, function(obj) {
            scene.add(obj) 
            obj.scale.set(0.5, 0.5, 0.5); //设置模型大小 
            // obj.position.set(x, y, z)  //设置模型位置 
            
            // 播放指定动作 
            // var mixer = new THREE.AnimationMixer(obj) 
            // console.log(obj.animations)
            // var anim = mixer.clipAction(obj.animations[0]) 
            // anim.timeScale = 1; //默认1，可以调节播放速度
            // anim.loop = THREE.LoopOnce; //不循环播放
            // anim.clampWhenFinished=true;//暂停在最后一帧播放的状态
            // anim.play();//播放动画 
          })
        } else if(fileFormat == 'glb') { //导入GLB模型文件
          console.log('=== load glb model')
          loader = new GLTFLoader();
          loader.load(this.modelUrl, function(gltf) {
            scene.add(gltf.scene);
          });
        }
      },
    }
  }
</script>

<style scoped>
  .content {
    width: 100%;
  }
  
  
</style>